import React from 'react';
import { ChatSession } from '../../KimiChat';
import './HistoryList.scss';

interface HistoryListProps {
    sessions: ChatSession[];
    currentSessionId: string | null;
    onCreateSession: () => void;
    onDeleteSession: (sessionId: string) => void;
    onSelectSession: (sessionId: string) => void;
}

const HistoryList: React.FC<HistoryListProps> = ({
    sessions,
    currentSessionId,
    onCreateSession,
    onDeleteSession,
    onSelectSession
}) => {
    const formatDate = (date: Date) => {
        const now = new Date();
        const diff = now.getTime() - date.getTime();
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        
        if (days === 0) {
            return '今天';
        } else if (days === 1) {
            return '昨天';
        } else if (days < 7) {
            return `${days}天前`;
        } else {
            return date.toLocaleDateString();
        }
    };

    return (
        <div className="history-list">
            <div className="history-list__header">
                <button 
                    className="history-list__new-btn"
                    onClick={onCreateSession}
                >
                    <span className="history-list__new-icon">+</span>
                    新建对话
                </button>
            </div>
            
            <div className="history-list__content">
                {sessions.length === 0 ? (
                    <div className="history-list__empty">
                        <div className="history-list__empty-icon">💬</div>
                        <p>暂无对话历史</p>
                        <p className="history-list__empty-tip">点击上方按钮开始新对话</p>
                    </div>
                ) : (
                    <div className="history-list__sessions">
                        {sessions.map(session => (
                            <div
                                key={session.id}
                                className={`history-list__session ${
                                    currentSessionId === session.id ? 'history-list__session--active' : ''
                                }`}
                                onClick={() => onSelectSession(session.id)}
                            >
                                <div className="history-list__session-content">
                                    <div className="history-list__session-title">
                                        {session.title}
                                    </div>
                                    <div className="history-list__session-meta">
                                        <span className="history-list__session-date">
                                            {formatDate(session.updatedAt)}
                                        </span>
                                        <span className="history-list__session-count">
                                            {session.messages.length} 条消息
                                        </span>
                                    </div>
                                    {session.messages.length > 0 && (
                                        <div className="history-list__session-preview">
                                            {session.messages[session.messages.length - 1].content.substring(0, 50)}
                                            {session.messages[session.messages.length - 1].content.length > 50 ? '...' : ''}
                                        </div>
                                    )}
                                </div>
                                <button
                                    className="history-list__delete-btn"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onDeleteSession(session.id);
                                    }}
                                    title="删除对话"
                                >
                                    ×
                                </button>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

export default HistoryList;